import { View, Text, Image, ITouchEvent, Picker } from '@tarojs/components'
import Taro, { useDidShow, useLoad } from '@tarojs/taro';
import classNames from 'classnames';
import { useState } from 'react'
import axios from '@/request/index'
import { useWebStore } from '@/store/web';
import './index.scss'

export default function News() {

  const [tab, setTab] = useState(0);
  const [timeVisible, setTimeVisible] = useState(false);
  const [timeType, setTimeType] = useState(0);
  const [dateSel, setDate] = useState('');
  const [newsList, setNewsList] = useState<any[]>([]);

  const { setUrl } = useWebStore()

  useLoad(() => {
    console.log('Page loaded.')
  })

  const initList = async (index?: any) => {
    const newsRes = await axios.get('/catalog/homePage', {
      params: {
        type: 1,
        sortType: index >=0 ? index : tab
      }
    })
    if (newsRes && newsRes.data) {
      setNewsList(newsRes.data)
    }
  }

  useDidShow(() => {
    initList()
  });

  const onSelectTab = (index) => {
    // if (index === 0) {
    //   setTimeVisible(false);
    // } else {
    //   setTimeVisible(true);
    // }
    setTab(index);
    initList(index);
  }

  const onClickTimeType = (index) => {
    setTimeType(index);
  }
  const onClickCancelTimeType = (e: ITouchEvent) => {
    e.stopPropagation();
    e.preventDefault();
    setTimeVisible(false);
  }

  const onDateChange = e => {
    setDate(e.detail.value);
    setTimeVisible(false);
  }

  const onClickItem = (item) => {
    setUrl(item.content)
    Taro.navigateTo({
      url: `/package-home/pages/WebView/index`
    })
  }

  return (
    <View className='news bg-[#F5F5F5] min-h-screen'>
      <View className='bg-white h-[112px] flex flex-row items-center px-[40px]'>
        <View
          className=
          {
            classNames('text-[36px]',
              tab === 0 ? 'text-[#5959F8] ' : 'text-[#000] ')
          }
          onClick={() => onSelectTab(0)}
        >
          推荐
        </View>
        <View
          className='text-[#000] text-[36px] ml-16 relative'
          onClick={() => onSelectTab(1)}
        >
          最新
          <Image src={tab === 1 ? require('./images/tab.png') : require('./images/tab_normal.png')} className='w-[30px] h-[8px] absolute -bottom-1 left-[50%] -translate-x-[50%]' />
          {/* {
            timeVisible &&
            <View className='rounded-t-[8px] bg-[#FAFAFA] absolute top-[117%] w-[200px] left-[50%] -translate-x-[50%]'>
              <View className={classNames('text-[32px] text-center leading-[100px] h-[100px] border-b border-[#EEEEEE]', timeType === 0 ? 'text-[#5959F8]' : 'text-[#000]')}
                onClick={() => onClickTimeType(1)}
              >
                最新
              </View>
              <View className={classNames('text-[32px] text-center leading-[100px] h-[100px] border-b border-[#EEEEEE] relative', timeType === 1 ? 'text-[#5959F8]' : 'text-[#000]')}
                onClick={() => onClickTimeType(0)}
              >
                自定义
                {
                  timeType === 1 &&
                  <View className='absolute left-[110%] w-[240px] top-0 bottom-0 bg-[#FAFAFA]'>
                    <Picker className='w-full h-full bg-[#FAFAFA]' mode="date" onChange={onDateChange}>
                      <View className='h-full bg-[#FAFAFA] rounded-lg overflow-hidden'>
                        <Text className='text-[#999]'>{dateSel || '请选择时间'}</Text>
                      </View>
                    </Picker>
                  </View>
                }
              </View>
              <View className='text-[32px] text-[#808080] text-center leading-[100px] h-[100px]' onClick={(e) => onClickCancelTimeType(e)}>
                取消
              </View>
            </View>
          } */}
        </View>
      </View>
      <View className='px-4'>
        {/* <View className='flex flex-col bg-[rgba(229,229,229,0.5)] rounded-lg overflow-hidden'>
          <Image src='' className='h-[280px] w-full bg-[#000]' />
          <View className='h-[80px] px-3 text-[28px] text-[#000] leading-[80px]'>
            标题
          </View>
          <View className='bg-[#FFF] flex flex-row items-center px-3 py-2'>
            <Text className='text-[24px] text-[#000]'>新华社</Text>
            <Text className='text-[24px] text-[#000] ml-10'>2024-02-11</Text>
          </View>
        </View> */}
        {/* 列表 */}
        <View className='mt-[50px]'>
          {
            newsList.map((item, index) => {
              return (
                <View 
                key={index} 
                onClick={() => onClickItem(item)}
                className='flex flex-row items-center justify-between gap-5 py-[40px] border-t border-[#E5E5E5]'>
                  <View className='flex-1'>
                    <View className='text-[40px] text-[#000] leading-[48px] line-clamp-2'>{item.title}</View>
                    <View className='mt-3 flex flex-row items-center justify-between py-2'>
                      <Text className='text-[24px] text-[#000]'>{item.author}</Text>
                      <Text className='text-[24px] text-[#000] ml-2'>{item.time}</Text>
                    </View>
                  </View>
                  <View 
                  // src={item.cover} 
                  className='w-[300px] h-[170px] bg-transparent bg-contain'
                  style={{
                    backgroundImage: `url(${item.cover})`,
                    backgroundPosition: 'center',
                    backgroundRepeat: 'no-repeat',
                  }}
                  /> 
                </View>
              )
            })
          }
        </View>
      </View>
    </View>
  )
}
